<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>力石中间件平台</title>
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/res/css/global2.css" media="all">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/common.variate.js"></script>
    <script src="/js/common.method.js"></script>
    <style>
        .fly-extend-banner-search {
            position: absolute;
            left: 0;
            top: 155px;
            width: 100%;
            text-align: center;
        }

        .layui-input {
            height: 42px;
            border: none;
            width: 300px;
            box-shadow: 0 0 10px rgba(0,0,0,.15);
            border-radius: 2px 0 0 2px;
        }
        .layui-col-space{
            padding-top: 40px;
        }

        .fly-extend-banner-title {
            top: 70px;
            font-size: 30px;
            font-weight: 300;
            color: #fff;
            color: rgba(255,255,255,1);
        }

        .layui-col-md6{
            padding: 10px;
        }

        .fly-extend-list-header{
            margin-bottom: 0px;
        }

        .label{
            margin-right: 5px;
        }
        .layui-nav-item2 {
            position: relative;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            vertical-align: middle;
            line-height: 60px;
        }
    </style>
</head>
<body>

<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <a class="fly-logo" href="/">
            <img src="/images/logo.png" alt="layui" style="width: 105px;">
        </a>
        <ul class="layui-nav fly-nav-user" id="tabYe">

        </ul>
    </div>
</div>


<div class="fly-extend-banner">
    <div class="layui-carousel" id="test1" data-height="400px" lay-anim="fade" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 400px;">
        <div carousel-item>
            <div style="background-image: url(/images/1.jpg)" class="layui-this">
                <div></div>
            </div>
            <div style="background-image: url(/images/2.jpg)" class="">
                <div></div>
            </div>
        </div>
        <div class="layui-carousel-ind">
            <ul>
                <li class="layui-this"></li>
                <li class=""></li>
            </ul>
        </div>
    </div>
    <h1 class="fly-extend-banner-title">力石科技中间件平台</h1>
    <form class="fly-extend-banner-search">
        <div class="layui-inline">
            <input id="search" placeholder="搜索文档" autocomplete="off" value="" class="layui-input" />
        </div><input value="搜索" onclick="searchDoc()" type="button" class="layui-btn"/>
    </form>
    <div class="fly-extend-banner-release">
        <a href="/add.html" class="layui-btn layui-btn-lg">发布文档</a>
    </div>
</div>


<div class="layui-container">
    <ul class="layui-row layui-col-space" id="docs">
    </ul>
    <div id="test2" style="text-align: center;margin-top: 30px;"></div>
</div>

<div class="fly-footer">
    <p> 2018 &copy; <a href="https://gitee.com/chaofan2685_admin" target="_blank">炒饭 出品</a></p>
    <p>
        <a href="http://www.lishiots.com/" target="_blank">力石科技</a>
        <a href="tencent://message/?uin=894195915&Site=http://vps.shuidazhe.com&Menu=yes">交个朋友</a>
        <a href=mailto:chaofan2685@qq.com>问题反馈</a>
    </p>
</div>

<script src="/res/layui/layui.all.js"></script>
<script>
    var count = 0;
    window.onload= function () {
        checkLogin();
        loadCarousel();
        loadData(1,10,"");
    }

    function loadCarousel() {
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height: '400px' //设置容器宽度
                ,arrow: 'none' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    }

    function loadData(currentPage,pageSize,name) {
        $.ajax({
            type: "GET",
            url: "/api/doc/queryPage",
            data: {currentPage:currentPage,pageSize:pageSize,name:name},
            dataType: "json",
            success: function(data){
                count+=1;
                $("#docs").html("");
                var docs = data.data;
                docs.forEach(function (doc) {
                    var html = buildHtml(doc.id,doc.title,doc.description,doc.userName,doc.labels);
                    $("#docs").append(html);
                });
                if (count==1){
                    loadPage(data.count);
                }
            }
        });
    }

    function loadPage(count) {
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'test2' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: count //数据总数，从服务端得到
                ,groups: 5 //连续出现的页码个数
                ,jump: function(obj, first) {
                    if (!first) {
                        loadData(obj.curr,obj.limit)
                    }
                }
            });
        });
    }
    
    function searchDoc() {
        count=0;
        loadData(1,10,$("#search").val());
        return false;
    }

    function labelSearch(obj) {
        var lable = $(obj).text();
        $("#search").val(lable);
        searchDoc();
    }

</script>
</body>
</html>